<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./prism.css" />
    <style>
      .show {
        background-color: rgba(0, 0, 0, 0.1);
        margin-top: 20px;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <div>当前模式：<span class="packaged"></span></div>
    <div>
      <button>执行</button>
    </div>

    <div class="show">
      <div>输出类型： <span class="status"></span></div>
      <pre><code class="language-javascript"></code></pre>
    </div>

    <script src="./prism.js"></script>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = () => {
        const codeEl = document.querySelector("code");
        codeEl.innerHTML = '';
        $electron.spawnTest();
      };

      $electron.onProcessMsg((res) => {
        const codeEl = document.querySelector("code");
        // document.querySelector(".status").innerHTML = res.type;
        codeEl.innerHTML += res.type+'：\n'+res.content;
        Prism.highlightAll();
      });

      $electron.isPackaged().then((res) => {
        const packagedEl = document.querySelector(".packaged");
        packagedEl.innerHTML = res ? "packaged" : "dev";
      });
    </script>
  </body>
</html>
